<template>
	<view :style="pageHeight?'height:'+pageHeight+'px':'height:100vh;'" class="login_Box app">
		<view class="login_Box_mack">
			<view class="login_Box_content">
				<view class="login_Box_content_title">
					儒雅牛
				</view>
				<view class="login_Box_content_text">
					一站式吃喝玩乐购 自购省钱 分享赚钱
				</view>
				<view v-if="type == 1" class="login_Box_content_cont">
					<view class="login_Box_content_cont_top">
						未注册手机验证后即完成注册
					</view>
					<u--input :adjust-position="false" type="number"
						placeholderClass="login_Box_content_cont_inputbox_placeholeder"
						class="login_Box_content_cont_inputbox" placeholder="+86 请输入手机号" border="surround"
						v-model="form.phone"></u--input>
					<u-button :disabled="buttonLoading" @click="codebutton()" class="login_Box_content_cont_button"
						text="获取验证码"></u-button>
				</view>
				<view v-if="type == 2" class="login_Box_content_cont">
					<view class="login_Box_content_cont_top">
						未注册手机验证后即完成注册
					</view>
					<u--input :adjust-position="false" type="number"
						placeholderClass="login_Box_content_cont_inputbox_placeholedert"
						class="login_Box_content_cont_inputbox" placeholder="请输入验证码" border="surround"
						v-model="form.smsCode"></u--input>
					<u-button :disabled="!form.smsCode || buttonLoading " @click="loginConfirm()"
						class="login_Box_content_cont_button" text="登录"></u-button>
					<view v-if="time != 0" class="login_Box_content_cont_CountdownBox">
						{{time}}s <text class="login_Box_content_cont_Countdown">后重新发送</text>
					</view>
					<view v-if="time == 0" class="login_Box_content_cont_CountdownBox">
						<text @click="codebutton" class="login_Box_content_cont_Countdown">重新发送</text>
					</view>
				</view>
			</view>

			<view class="login_Box_protocol">
				<view class="login_Box_protocol_title">
					第三方登录
				</view>
				<view class="login_Box_protocol_with">
					<view @click="bindwx" class="login_Box_protocol_with_list">
						<view class="login_Box_protocol_with_list_imagebox">
							<image style="width: 100%;" src="../../static/loginWeiXin.png" mode="widthFix"></image>
						</view>
						<view class="login_Box_protocol_with_list_text">
							微信
						</view>
					</view>
					<!-- 	<view class="login_Box_protocol_with_list">
						<view class="login_Box_protocol_with_list_imagebox">
							<image style="width: 100%;" src="../../static/loginAlipay.png" mode="widthFix"></image>
						</view>
						<view class="login_Box_protocol_with_list_text">
							支付宝
						</view>
					</view> -->
				</view>
				<view class="login_Box_protocol_contract">
					<!-- <view v-if="protocolMode" class="login_Box_protocol_contract_mack">
						阅读同意后再登陆哦
						<view class="login_Box_protocol_contract_mack_arrow"></view>
					</view> -->
					<view @click="contract = !contract" class="login_Box_protocol_contract_left">
						<view v-show="contract" class="login_Box_protocol_contract_left_bar">
						</view>
					</view>
					<view class="login_Box_protocol_contract_right">
						已阅读并同意 <text @click="protocolModet = true" class="xieyi">《儒雅牛用户服务协议》</text>
						以及 <text @click="protocolModey = true" class="xieyi">《儒雅牛隐私政策》</text>
					</view>
				</view>
			</view>

			<view class="login_Box_footer">
				<view>
					山东福禄通电子商务有限公司
				</view>
				<view>
					Copyright © Ruyakamama 1208
				</view>
			</view>
		</view>

		<u-modal confirmColor="#ff731f" confirmText="同意" @cancel="protocolMode = false" :showCancelButton="true"
			@confirm="protocolMode=false" :show="protocolMode" title="儒雅牛服务协议">
			<view style="max-height: 50vh;overflow-x: hidden;">

				请你务必审慎阅读、充分理解”服务协议“和”隐私政策“各条款，包括但不限于：为了向您提供即时通讯、内容分享等服务，我们需要你的手机设备信息、操作日志等个人信息。您可以在”设置“中查看、变更、删除个人信息并管理您的授权。
				<br>您可以阅读<text @click="goxieyi()" class="xieyi">《儒雅牛用户服务协议》</text>和<text @click="goyinsi()"
					class="xieyi">《儒雅牛隐私政策》</text>了解详细信息。如你同意请点击“同意”开始接受我们的服务

			</view>
		</u-modal>
		<u-modal confirmColor="#ff731f" confirmText="同意" @cancel="protocolModet = false" :showCancelButton="true"
			@confirm="protocolModet=false" :show="protocolModet" title="儒雅牛用户服务协议">
			<view>
				<scroll-view style="height: 50vh;" scroll-y="true">
					<xieyi type="1"></xieyi>
				</scroll-view>
			</view>
		</u-modal>
		<u-modal confirmColor="#ff731f" confirmText="同意" @cancel="protocolModey = false" :showCancelButton="true"
			@confirm="protocolModey=false" :show="protocolModey" title="儒雅牛隐私政策">
			<view>
				<scroll-view style="height: 50vh;" scroll-y="true">
					<yinsi type="1"></yinsi>
				</scroll-view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		identifyingcodesms,
		login
	} from '@/api/login'
	import {
		loginwx
	} from '@/api/mine'
	import {
		Update
	} from '@/api/upload'
	import xieyi from './xieyi.vue'
	import yinsi from './yinsi.vue'
	export default {
		components: {
			xieyi,
			yinsi
		},
		data() {
			return {
				form: {},
				contract: false,
				type: 1,
				time: 0,
				buttonLoading: false,
				setInterval: null,
				protocolMode: true,
				protocolModet: false,
				protocolModey: false,
				backUrl: null,
				LinkType: null,
				invitacode: '',
				pageHeight: 0
			}
		},
		onLoad(data) {
			this.backUrl = decodeURIComponent(data.Url)
			this.LinkType = this.getQueryVariable(decodeURIComponent(data.Url), 'pageLinkType')
			if (data.invitacode) {
				this.invitacode = data.invitacode
				this.form.invitationCode = data.invitacode
			}
			uni.getSystemInfo({
				success: (res) => {
					// this.customNavHeight += (res.statusBarHeight * 2)
					// this.customNavHeight -= 6
					console.log(res)
					console.log(res.safeArea.height)
					this.pageHeight = res.safeArea.height + res.statusBarHeight
				}
			})
			// let pages = getCurrentPages() // 获取栈实例
			// if (pages.length >= 2) {
			// 	let prevPage = pages[pages.length - 2]
			// 	console.log(prevPage)
			// 	this.backUrl = prevPage.route;
			// 	this.LinkType = prevPage.LinkType;
			// }
			// 调上个页面方法
			// // #ifdef H5
			// beforePage.submitAct()
			// // #endif

			// // 但是，在uni-app中是适配多端的，beforePage.submitAct()只在h5中有效，在app端和微信小程序端都会报错 not a function
			// // 在h5和app中实现当前页调上个页面方法
			// // #ifndef H5
			// beforePage.$vm.submitAct()
			// // #endif
			Update()
		},
		methods: {
			goyinsi() {
				uni.navigateTo({
					url: './yinsi'
				})
			},
			goxieyi() {
				uni.navigateTo({
					url: './xieyi'
				})
			},
			bindwx() {
				if (!this.contract) {
					// uni.showToast({
					// 	title: '请阅读并同意《儒雅卡妈妈服务协议》以及《隐私政策》',
					// 	duration: 2000,
					// 	icon: 'none'
					// });
					this.protocolModefun()
					return
				}
				let _that = this
				uni.login({
					provider: 'weixin',
					// onlyAuthorize: true,
					// scopes: 'auth_user',
					success: function(loginRes) {
						console.log(loginRes)
						// _that.code = loginRes.code
						_that.loginwx(loginRes.authResult.openid, loginRes.authResult.access_token,loginRes.authResult);
						// _that.loginwx(loginRes.code);
						// console.log(loginRes.authResult);
					},
					fail: function(err) {
						console.log(err)
					},
					complete: function(err) {
						console.log(err)
					}
				})
			},
			loginwx(openid, accessToken , obj) {
				// loginwx(code) {
				console.log(openid, accessToken)
				let data = {
					openId: openid,
					accessToken: accessToken,
					unionId:obj.unionid
				}
				// let data = {
				// 	wxCode: code
				// }
				console.log(data, 886)
				loginwx(data).then(res => {
					console.log(res)
					if (res.success == 1) {
						// this.openId = res.data.openId;
						if (res.data.token) {
							uni.showToast({
								icon: 'none',
								title: '登录成功'
							})
							uni.setStorageSync('token', res.data.token)
							uni.setStorageSync('user', JSON.stringify(res.data))
							setTimeout(() => {
								if (this.backUrl !== null && this.backUrl != 'undefined') {
									if (this.LinkType == 'switchTab') {
										uni.switchTab({
											url: '/' + this.backUrl
										});
									} else {
										uni.redirectTo({
											url: '/' + this.backUrl
										});
									}
									console.log('/' + this.backUrl)
								} else {
									uni.switchTab({
										url: '/pages/index/index'
									});
								}

							}, 1000)
						} else {
							uni.navigateTo({
								url: '/pages/login/wxlogin?openId=' + res.data.openId+'&backUrl=' + encodeURIComponent(this.backUrl) + '&LinkType='+this.LinkType+"&unionId="+res.data.unionId
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.message
						})
					}
				})
			},
			loginConfirm() {
				if (!this.contract) {
					// uni.showToast({
					// 	title: '请阅读并同意《儒雅卡妈妈服务协议》以及《隐私政策》',
					// 	duration: 2000,
					// 	icon: 'none'
					// });
					this.protocolModefun()
					return
				}
				this.buttonLoading = true
				this.form.smsCodeId = this.smsCodeId
				login(this.form).then(res => {
					if (res.success) {
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('user', JSON.stringify(res.data))
						setTimeout(() => {
							if (this.backUrl !== null && this.backUrl != 'undefined') {
								if (this.LinkType == 'switchTab') {
									uni.switchTab({
										url: '/' + this.backUrl
									});
								} else {
									uni.redirectTo({
										url: '/' + this.backUrl
									});
								}
								console.log('/' + this.backUrl)
							} else {
								uni.switchTab({
									url: '/pages/index/index'
								});
							}

						}, 2000)
						setTimeout(() => {
							this.buttonLoading = true
						}, 1)
					}
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: 'none'
					});
				}).finally(() => {
					this.buttonLoading = false
				})
			},
			protocolModefun() {
				this.protocolMode = true;
				// setTimeout(() => {
				// 	this.protocolMode = false
				// }, 2000)
			},
			codebutton() {
				if (!(/^1[3456789]\d{9}$/.test(this.form.phone))) {
					if (!this.form.phone) {
						uni.showToast({
							title: '请输入手机号',
							duration: 2000,
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '手机号输入不正确',
							duration: 2000,
							icon: 'none'
						});
					}
					return
				}
				if (!this.contract) {
					uni.showToast({
						title: '请阅读并同意《儒雅卡妈妈服务协议》以及《隐私政策》',
						duration: 2000,
						icon: 'none'
					});
					this.protocolModefun()
					return
				}
				this.buttonLoading = true
				identifyingcodesms(this.form).then(res => {
					if (res.success == 1) {
						this.type = 2;
						this.smsCodeId = res.data.id
						this.Countdown()
					} else {
						uni.showToast({
							title: res.message,
							duration: 2000,
							icon: 'none'
						});
					}
				}).finally(() => {
					this.buttonLoading = false
				})
			},
			Countdown() {
				if (this.setInterval) clearInterval(this.setInterval)
				this.time = 59;
				this.setInterval = setInterval(() => {
					if (this.time == 0) {
						clearInterval(this.setInterval)
						return
					}
					this.time--
				}, 1000)
			},
			getQueryVariable(Url, variable) {
				let start = Url.indexOf('?'); //获得字符串的开始位置
				let result = Url.substring(start + 1, Url.length);
				let vars = result.split("&");
				for (let i = 0; i < vars.length; i++) {
					let pair = vars[i].split("=");
					if (pair[0] == variable) {

						return pair[1];
					}
				}
				return (false);
			}
		}
	}
</script>
<style>
	.login_Box_content_cont_inputbox_placeholeder {
		color: rgba(255, 255, 255, 0.7) !important;
	}

	.login_Box_content_cont_inputbox_placeholedert {
		color: rgba(0, 0, 0, 0.3) !important;
	}
</style>
<style lang="scss" scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.login_Box {
		width: 100vw;
		// height: 100vh;
		position: relative;
		// overflow: auto;
		background-image: url(../../static/loginBG.jpg);
		background-size: 100% 100%;

		.login_Box_content {
			position: absolute;
			top: 132upx;
			left: 0;
			padding: 46upx;
			width: 100%;

			.login_Box_content_title {
				font-size: 56upx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80upx;
			}

			.login_Box_content_text {
				font-size: 24upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 34upx;
				margin-top: 4upx;
			}

			.login_Box_content_cont {
				margin-top: 102upx;
				width: 100%;

				.login_Box_content_cont_top {
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 34upx;
				}

				.login_Box_content_cont_inputbox {
					width: 100%;
					border: none;
					height: 102upx;
					background: rgba(255, 255, 255, 0.5);
					border-radius: 52upx;
					margin-top: 22upx;
					padding: 24upx 34upx !important;
					font-size: 36upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
					line-height: 50upx;
				}

				.login_Box_content_cont_button {
					margin-top: 36upx;
					height: 102upx;
					background: #FC8301;
					border-radius: 52upx;
					z-index: 23;
					height: 51px;
					background: url(../../static/loginButtonBG.png) 100% no-repeat;
					justify-content: center;
					align-items: center;
					border: none;
					display: flex;
					font-size: 36upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.8);
					line-height: 50upx;
				}

				.login_Box_content_cont_CountdownBox {
					margin-top: 36upx;
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.5);
					line-height: 34upx;

					.login_Box_content_cont_Countdown {
						color: #006BFF;
						margin-left: 10upx;
					}
				}
			}
		}


		.login_Box_protocol {
			position: absolute;
			bottom: 198upx;
			width: 100%;
			padding: 46upx;

			.login_Box_protocol_title {
				font-size: 24upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.9);
				line-height: 34upx;
			}

			.login_Box_protocol_with {
				margin-top: 20upx;
				display: flex;
				align-items: center;
				width: 100%;

				.login_Box_protocol_with_list {
					margin-right: 50upx;

					.login_Box_protocol_with_list_imagebox {
						width: 76upx;
						height: 76upx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 10upx;
						font-size: 0;
					}

					.login_Box_protocol_with_list_text {
						font-size: 24upx;
						font-family: PingFangSC-Regular, PingFang SC;
						margin-top: 12upx;
						text-align: center;
						font-weight: 400;
						color: rgba(255, 255, 255, 0.9);
						line-height: 34upx;
					}
				}
			}

			.login_Box_protocol_contract {
				margin-top: 40upx;
				display: flex;
				align-items: center;
				position: relative;

				.login_Box_protocol_contract_mack {
					position: absolute;
					bottom: -16upx;
					transform: translateY(100%);
					left: -30upx;
					padding: 20upx 30upx;
					border-radius: 20upx;
					background-color: rgba(0, 0, 0, 0.61);
					font-size: 34upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.8);
					line-height: 44upx;

					.login_Box_protocol_contract_mack_arrow {
						position: absolute;
						border: 10upx solid rgba(0, 0, 0, 0.61);
						top: 0;
						transform: translateY(-100%);
						left: 30upx;
						border-top-color: rgba(0, 0, 0, 0);
						border-left-color: rgba(0, 0, 0, 0);
						border-right-color: rgba(0, 0, 0, 0);
					}
				}

				.login_Box_protocol_contract_left {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 2upx solid #FFFFFF;
					border-radius: 100%;
					width: 28upx;
					height: 28upx;
					position: relative;

					.login_Box_protocol_contract_left_bar {
						width: 16upx;
						height: 16upx;
						// position: absolute;
						// top: 50%;
						// left: 50%;
						// transform: translate(-50% , -50%);
						background-color: #FF731E;
						border-radius: 100%;
					}
				}

				.login_Box_protocol_contract_right {
					margin-left: 18upx;
					width: calc(100% - 18upx - 28upx - 2upx);
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.9);
					line-height: 34upx;
				}
			}
		}

		.login_Box_footer {
			width: 100%;
			text-align: center;
			font-size: 24upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.4);
			line-height: 34upx;
			position: absolute;
			bottom: 46upx;
			left: 0;

		}

		.login_Box_mack {
			position: absolute;
			min-height: 100%;
			width: 100%;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, 0.2);
		}
	}

	.xieyi {
		color: #1467FF;
	}
</style>
